import {Component, HostBinding, OnInit} from '@angular/core';
import {UserService} from '../../../service/user.service';
import {defaultRouteAnim} from '../../../anim/router.anim';
import {alertDialog, loadingDialog} from '../../../util/dialog.util';
import {MatDialog, MatSnackBar} from '@angular/material';
import {errorSnackBar, openSnackBar} from '../../../util/snack.util';
import {ActivatedRoute, Router} from '@angular/router';
import {User} from '../../../model/user';
import {ConfigService} from '../../../service/config.service';

@Component({
  selector: 'app-details',
  templateUrl: './user.details.component.html',
  styleUrls: ['./user.details.component.css'],
  animations: [defaultRouteAnim]
})
export class UserDetailsComponent implements OnInit {
  @HostBinding('@routeAnim') routeAnim;
  avatarImg: HTMLImageElement;
  selectAvatar: HTMLInputElement;
  imageType = [
    'image/gif', 'image/jpeg', 'image/jpg', 'image/png', 'image/bmp'
  ];
  uid: number;
  user: User;
  userSex: string;
  userLevel: number;

  constructor(private router: Router, private routerInfo: ActivatedRoute,
              public snackBar: MatSnackBar, private dialog: MatDialog,
              public userService: UserService, public configService: ConfigService) {
  }

  ngOnInit() {
    this.avatarImg = document.getElementById('avatar-img') as HTMLImageElement;
    this.selectAvatar = document.getElementById('select-avatar') as HTMLInputElement;
    this.userSex = this.userService.user.sex === true ? '女' : '男';
    this.getUserLevel(this.userService.user.exp);
    this.uid = this.routerInfo.snapshot.queryParams.id;
    // tslint:disable-next-line:triple-equals
    if (this.uid && this.uid != this.userService.user.uid) {
      this.userService.getFriend(this.uid).subscribe(friend => {
        this.user = friend;
        this.userSex = this.user.sex === true ? '女' : '男';
        this.getUserLevel(this.user.exp);
      }, error1 => {
        errorSnackBar(this.snackBar, error1);
      });
    }
  }

  fabClick() {
    this.selectAvatar.click();
  }

  selectedFileOnChanged(event: any) {
    const file = this.selectAvatar.files.item(0) as File;
    if (file) {
      const size = (file.size / 1024);
      const type = file.type;
      if (size < 200 && this.isImage(type)) {
        const loadingDialogRef = loadingDialog(this.dialog);
        this.userService.uploadAvatar(file).subscribe(() => {
          loadingDialogRef.close();
          // 上传文件成功;
          openSnackBar(this.snackBar, '上传头像成功！');
          this.router.navigate(['/home']);
        }, error1 => {
          loadingDialogRef.close();
          // 上传文件后获取服务器返回的数据错误
          errorSnackBar(this.snackBar, error1);
        });
      } else {
        alertDialog(this.dialog, '错误', '只能上传文件小于200KB的图片（.png | .jpg | .jpeg | .gif | .bmp）');
      }
    }
  }

  isImage(type: string): boolean {
    let isImage = false;
    this.imageType.forEach(value => {
      if (type === value) {
        isImage = true;
      }
    });
    return isImage;
  }

  private getUserLevel(exp: number) {
    this.configService.userConfig.levelList.forEach(level => {
      if (level.exp > exp) {
        this.userLevel = level.id - 1;
        return;
      }
    });
  }
}
